<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>标签页</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="标签设置" name="c1">
          <div class="tc">
            <ul>
              <draggable element="ul" v-model="data.content" :animation="200">
                <li v-for="(item, i) in data.content" :key="i" :class="{on: data.currentIndex == i}">
                  <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                  <div class="txt" @click="selectTab(item, i)">{{ item.name }}</div>
                  <div class="delIcon" @click="removeTab(i)"><i class="el-icon-delete"></i></div>
                </li>
              </draggable>
            </ul>
          </div>
          <el-button @click="addTab">添加</el-button>
        </el-collapse-item>

        <el-collapse-item title="商品设置" name="c2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="标签文字">
              <el-input style="width:300px;" placeholder="" v-model="data.content[data.currentIndex].name" maxlength="4" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="选择商品">
              <el-radio-group style="line-height: 30px;vertical-align: text-top;" v-model="data.content[data.currentIndex].type" @change="changeLimit">
                <el-radio :label="0">手动选择</el-radio>
                <el-radio :label="1">选择分类</el-radio>
                <!--      <el-radio :label="2">选择分组</el-radio>
                <el-radio :label="3">营销属性</el-radio> -->
              </el-radio-group>
              <div class="input_content" v-show="data.content[data.currentIndex].type == 3">
                <el-radio-group v-model="data.content[data.currentIndex].data[3].markeName">
                  <el-radio :label="'new'">新品商品</el-radio>
                  <el-radio :label="'hot'">热卖商品</el-radio>
                  <el-radio :label="'recommend'">推荐商品</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>

          <div class="proSelect" v-if="data.content[data.currentIndex].type != 3">
            <div class="phead">
              <div class="name">商品</div>
              <div class="price">价格</div>
              <div class="action">操作</div>
            </div>
            <ul>
              <draggable element="ul" v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].list" :animation="200">
                <li
                  v-for="(item, i) in data.content[data.currentIndex].data[data.content[data.currentIndex].type].list.slice(
                    0,
                    data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit
                  )"
                  :key="i"
                >
                  <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                  <div class="pro">
                    <vimage style="width: 40px; height: 40px" :src="item.master" fit="fit"></vimage>
                    <div class="txt">
                      <span class="mark" v-if="item.type == 0">实</span>
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="price">{{ item.type == '2' ? item.sell_price + '积分' : '￥' + item.sell_price }}</div>
                  <div class="action">
                    <!-- <el-button type="text">替换</el-button> -->
                    <el-button type="text" @click="removePro(i)">删除</el-button>
                  </div>
                </li>
              </draggable>
              <li class="addPro" v-if="data.content[data.currentIndex].type == 0" @click="addPro"><el-button type="text">添加产品</el-button></li>
              <li class="addPro" v-if="data.content[data.currentIndex].type == 1" @click="addCate"><el-button type="text">选择分类</el-button></li>
              <!-- <li class="addPro" v-if="data.content[data.currentIndex].type == 2"><el-button type="text">选择分组</el-button></li> -->
            </ul>
          </div>

          <el-form size="medium" label-width="100px">
            <el-form-item label="显示数量">
              <div class="slider_box_num">
                <el-slider
                  class="slider_item"
                  :max="20"
                  v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit"
                  @change="changeLimit"
                ></el-slider>
                <el-input-number v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit" :controls="true" :min="0" :max="20">
                  <template slot="append">
                    .com
                  </template>
                </el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="商品排序" v-show="data.content[data.currentIndex].type != 0">
              <el-radio-group v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].order">
                <el-radio :label="'comprehensive'">综合</el-radio>
                <el-radio :label="'sellNum'">按销量</el-radio>
                <el-radio :label="'priceDesc'">价格降序</el-radio>
                <el-radio :label="'priceAsc'">价格升序</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>

        <el-collapse-item title="商品样式" name="c3">
          <el-form size="medium" label-width="100px">
            <el-form-item label="列表类型">
              <el-radio-group size="medium" v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.type">
                <el-radio label="two">双列</el-radio>
                <el-radio label="three">三列</el-radio>
                <el-radio label="list">列表</el-radio>
                <el-radio label="one">单列</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="商品背景">
              <ColorPicker :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.product" :name="'probg'"></ColorPicker>
            </el-form-item>

            <el-form-item label="商品标题">
              <ColorPicker :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.product" :name="'titleColor'"></ColorPicker>
            </el-form-item>

            <el-form-item label="商品售卖价">
              <el-radio-group v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price.show">
                <ColorPicker :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_price" :name="'color'"></ColorPicker>
              </div>
            </el-form-item>

            <el-form-item label="划线价格">
              <el-radio-group
                :disabled="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.isIg"
                v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.show"
              >
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.show">
                <div class="input_div">
                  <span class="label">显示文字：</span>
                  <div class="input-with-reset">
                    <el-input v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.text" placeholder="如:原价" class="">
                      <el-button slot="append" @click="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.text = '原价'">重置</el-button>
                    </el-input>
                  </div>
                </div>
                <ColorPicker
                  :title="'文字颜色：'"
                  :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price"
                  :name="'color'"
                ></ColorPicker>

                <!--      <div class="color_div" >
                  <el-color-picker size="medium" v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color"></el-color-picker>
                  <div class="input-with-reset">
                    <el-input v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color" size="medium" class="">
                      <template slot="prepend">#</template>
                      <el-button size="medium" slot="append" @click="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.color = '#969696'">重置</el-button>
                    </el-input>
                  </div>
                </div> -->
              </div>
            </el-form-item>

            <el-form-item label="商品销量">
              <el-radio-group v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.show">
                <div class="input_div">
                  <span class="label">显示文字：</span>
                  <div class="input-with-reset">
                    <el-input
                      size="medium"
                      v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.text"
                      placeholder="如:销量"
                      class=""
                    >
                      <el-button size="medium" slot="append" @click="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.line_price.text = '销量'">
                        重置
                      </el-button>
                    </el-input>
                  </div>
                </div>
                <ColorPicker
                  :title="'文字颜色：'"
                  :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total"
                  :name="'color'"
                ></ColorPicker>

                <!--   <div class="color_div" >
                  <el-color-picker size="medium" v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.color"></el-color-picker>
                  <div class="input-with-reset">
                    <el-input v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.color" size="medium" class="">
                      <template slot="prepend">#</template>
                      <el-button size="medium" slot="append" @click="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.sell_total.color = '#969696'">重置</el-button>
                    </el-input>
                  </div>
                </div> -->
              </div>
            </el-form-item>

            <el-form-item label="购买按钮">
              <el-radio-group v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.show">
                <el-form label-width="50px">
                  <el-form-item label="图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon != ''">
                        <i :class="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon"></i>
                        <!-- <i class="icon-abl-close el-icon-error" @click="removeIcon()"></i> -->
                        <span class="choose_bar" @click="selecticon()"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon == ''">
                        <i class="el-icon-plus" style="color:#409EFF;" @click="selecticon()"></i>
                      </span>
                    </div>
                  </el-form-item>
                  <el-form-item label="颜色">
                    <ColorPicker :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button" :name="'color'"></ColorPicker>
                  </el-form-item>
                </el-form>

                <!--   <div class="input_div">
                  <el-radio-group size="medium" v-model="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button.icon">
                    <el-radio label="el-sc-gouwuche2"><i class="el-sc-gouwuche2 iconfont"></i></el-radio>
                  </el-radio-group>
                </div>
                <ColorPicker :color="data.content[data.currentIndex].data[data.content[data.currentIndex].type].config.add_button" :name="'color'"></ColorPicker>
 -->
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>

        <el-collapse-item title="组件样式" name="c4">
          <el-form size="medium" label-width="100px">
            <el-form-item label="默认状态">
              <!--  <div class="color_div">
                <el-color-picker size="medium" v-model="data.config.color.normal"></el-color-picker>
                <div class="input-with-reset">
                  <el-input v-model="data.config.color.normal" class="">
                    <template slot="prepend">#</template>
                    <el-button slot="append" @click="data.config.color.text='#606266'">重置</el-button>
                  </el-input>
                </div>
              </div> -->
              <ColorPicker :color="data.config.color" :name="'normal'"></ColorPicker>
            </el-form-item>

            <el-form-item label="激活状态">
              <ColorPicker :color="data.config.color" :name="'active'"></ColorPicker>
              <!-- <div class="color_div">
                <el-color-picker size="medium" v-model="data.config.color.active"></el-color-picker>
                <div class="input-with-reset">
                  <el-input v-model="data.config.color.active" class="">
                    <template slot="prepend">#</template>
                    <el-button slot="append" @click="data.config.color.text='#303133'">重置</el-button>
                  </el-input>
                </div>
              </div> -->
            </el-form-item>

            <el-form-item label="标签高度">
              <div class="slider_box">
                <el-slider class="slider_item" :max="40" v-model="data.config.tabHeight"></el-slider>
                <el-input-number :controls="false" :min="0" :max="40" v-model="data.config.tabHeight"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="内部间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.config.marigin.ic"></el-slider>
                <el-input-number :controls="false" :min="0" :max="20" v-model="data.config.marigin.ic"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.config.marigin.top"></el-slider>
                <el-input-number :controls="false" :min="0" :max="20" v-model="data.config.marigin.top"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.config.marigin.bottom"></el-slider>
                <el-input-number :controls="false" :min="0" :max="20" v-model="data.config.marigin.bottom"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.config.marigin.lr"></el-slider>
                <el-input-number :controls="false" :min="0" :max="20" v-model="data.config.marigin.lr"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="圆角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.config.radius"></el-slider>
                <el-input-number :controls="false" :min="0" :max="20" v-model="data.config.radius"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog title="选择商品" :visible.sync="showSelectPro" width="50%" append-to-body>
      <SelectProduct :key="rk" :data="selectPro" :limit="data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit" @outData="closePro"></SelectProduct>
    </el-dialog>
    <el-dialog title="选择分类" :visible.sync="showSelectCate" width="40%" append-to-body>
      <SelectCategory
        :key="rk"
        :limit="data.content[data.currentIndex].data[data.content[data.currentIndex].type].limit"
        :cate="this.data.content[data.currentIndex].data[this.data.content[data.currentIndex].type].cateid"
        @outData="closeCate"
      ></SelectCategory>
    </el-dialog>
  </el-card>
</template>

<script>
import draggable from 'vuedraggable';
import SelectProduct from '@/components/SelectProduct/index';
import SelectCategory from '@/components/SelectCategory/index';
import ColorPicker from '@/components/ColorPicker/index';

import {getProList} from '@/api/shop/dndlist';
export default {
  data() {
    return {
      showSelectPro: false,
      showSelectCate: false,
      activeNames: ['c1', 'c2', 'c3', 'c4'],
      currentTab: {},
      //currentTabIndex:-1,
      selectPro: [],
      rk: 0
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    draggable,
    SelectProduct,
    SelectCategory,
    ColorPicker
  },
  created() {
    //this.currentTab = this.data.content[0];
    //this.currentTab = this.data.content[this.data.currentIndex];
    //console.log(this.currentTab)
  },
  watch: {
    'currentTab.name': function() {
      //拼接外传标签名字数组
      let o = {
        slideData: [],
        slideId: []
      };

      this.data.content.forEach((element, i) => {
        o.slideData.push(element.name);
        o.slideId.push(i);
      });

      //取消外发数据 20200828 by fox
      //this.$emit('tabsNameChange',o);
    }
  },
  methods: {
    selecticon() {
      this.$parent.showiconselcet();
    },
    geticon(data) {
      this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].config.add_button.icon = data;
    },
    //关闭选择分类框
    closeCate(data) {
      this.showSelectCate = false;
      if (data.c_id) {
        this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].cateid = data.id;
        getProList({classify_id: data.c_id}, 1, 9999).then(res => {
          this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].list = res.msg.data;
        });
      }
      //console.log(this.data.content[data.currentIndex])
    },
    //关闭选择产品框
    closePro(data) {
      this.showSelectPro = false;
		if(data){
			if (data.length > 0) {
			  if (data[0].type == '2') {
			    console.log(111);
			    this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].config.line_price.show = false;
			    this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].config.line_price.isIg = true;
			  } else {
			    this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].config.line_price.isIg = true;
			  }
			}
			this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].list = data;
			
		}
        
    },
    //切换标签商品数据源标签
    changeLimit(item) {
      let s = this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].limit,
        sl = this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].list;

      try {
        if (sl.length > 0) {
          sl.forEach(e => {
            e.show = false;
          });

          sl.forEach((e, i) => {
            e.show = true;
            console.log(s);
            if (i == s - 1) {
              throw new Error('end');
            }
          });
        }
      } catch (error) {}
    },
    //选择分类
    addCate() {
      this.showSelectCate = true;
      this.rk++;
    },
    //添加商品
    addPro() {
      //console.log(this.data.content[data.currentIndex])
      this.selectPro = this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].list;
      this.rk++;
      this.showSelectPro = true;
    },
    //删除产品
    removePro(i) {
      this.data.content[this.data.currentIndex].data[this.data.content[this.data.currentIndex].type].list.splice(i, 1);
    },
    //添加标签页
    addTab() {
      this.data.content.push({
        name: '标签' + (this.data.content.length + 1),
        type: 0,
        data: [
          {
            type: 0,
            typeName: '手动选择',
            limit: 20,
            config: {
              type: 'two',
              product: {
                probg: '#FFFFFF',
                titleColor: '#212121'
              },
              sell_price: {
                show: true,
                color: '#F56C6C'
              },
              line_price: {
                show: true,
                text: '原价',
                color: '#969696',
                isIg: false
              },
              sell_total: {
                show: true,
                text: '销量',
                color: '#969696'
              },
              add_button: {
                show: true,
                icon: 'el-icon-shopping-cart-full',
                color: '#F56C6C'
              }
            },
            list: []
          },
          {
            type: 1,
            typeName: '选择分类',
            limit: 20,
            cateid: -1,
            order: 'comprehensive',
            config: {
              type: 'two',
              product: {
                probg: '#FFFFFF',
                titleColor: '#212121'
              },
              sell_price: {
                show: true,
                color: '#F56C6C'
              },
              line_price: {
                show: true,
                text: '原价',
                color: '#969696',
                isIg: false
              },
              sell_total: {
                show: true,
                text: '销量',
                color: '#969696'
              },
              add_button: {
                show: true,
                icon: 'el-icon-shopping-cart-full',
                color: '#F56C6C'
              }
            },
            list: []
          },
          {
            type: 2,
            typeName: '选择分组',
            limit: 20,
            order: 'comprehensive',
            config: {
              type: 'two',
              product: {
                probg: '#FFFFFF',
                titleColor: '#212121'
              },
              sell_price: {
                show: true,
                color: '#F56C6C'
              },
              line_price: {
                show: true,
                text: '原价',
                color: '#969696',
                isIg: false
              },
              sell_total: {
                show: true,
                text: '销量',
                color: '#969696'
              },
              add_button: {
                show: true,
                icon: 'el-icon-shopping-cart-full',
                color: '#F56C6C'
              }
            },
            list: []
          },
          {
            type: 3,
            typeName: '营销属性',
            markeName: 'new',
            limit: 20,
            order: 'comprehensive',
            config: {
              type: 'two',
              product: {
                probg: '#FFFFFF',
                titleColor: '#212121'
              },
              sell_price: {
                show: true,
                color: '#F56C6C'
              },
              line_price: {
                show: true,
                text: '原价',
                color: '#969696',
                isIg: false
              },
              sell_total: {
                show: true,
                text: '销量',
                color: '#969696'
              },
              add_button: {
                show: true,
                icon: 'el-icon-shopping-cart-full',
                color: '#F56C6C'
              }
            },
            list: []
          }
        ]
      });

      //重构data中当前tabs数组
      // this.data.tabs = [];
      // this.data.content.forEach(e => {
      //   this.data.tabs.push({
      //     name:e.name
      //   });
      // });
      //console.log(this.data.content)
    },
    //删除标签页
    removeTab(i) {
      if (this.data.content.length > 1) {
        this.data.content.splice(i, 1);
        //重新设置游标数据
        // if(this.data.content.length == 1){
        //   console.log('ok')
        //   this.selectTab(this.data.content[0],0);
        // }else{
        //   console.log(i)
        //   console.log('nok')
        //   console.log(this.data.currentIndex)
        //   if(this.data.currentIndex > 0){
        //     this.data.currentIndex--;
        //     this.data.content[data.currentIndex] = this.data.content[this.data.currentIndex];
        //   };
        // };
        if (i <= this.data.currentIndex) {
          this.data.currentIndex == 0 ? 0 : this.data.currentIndex--;
          this.data.content[this.data.currentIndex] = this.data.content[this.data.currentIndex];
        }
      } else {
        this.$alert('标签页最少保持一页');
      }
    },
    //选择当前编辑的标签页
    selectTab(item, i) {
      //20200903
      //this.data.content[data.currentIndex] = item;
      //this.data.content[data.currentIndex]Index = i;
      // this.$emit('tabsSelect',{
      //   index:i,
      //   item:item
      // });
      //this.data.content[data.currentIndex] = item;
      // this.data.content[data.currentIndex] = null;
      // this.data.content[data.currentIndex] = {...item};
      //this.data.content[this.data.currentIndex] = this.data.content[i];
      this.data.currentIndex = i;
    }
  }
};
</script>

<style lang="scss" scoped>
.tc {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;

  ul {
    li {
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      font-size: 14px;
      color: #606266;
      border: 1px solid #dcdfe6;
      cursor: pointer;

      &:nth-child(n + 2) {
        border-top: none;
      }

      &:hover {
        border: 1px dashed #2d8cf0;
      }

      &.on {
        border: 1px solid #2d8cf0;
      }

      .dragIcon {
        width: 40px;
        line-height: 36px;
        text-align: center;
        border-right: 1px solid #dcdfe6;
        background: #f4f6f8;
        font-size: 16px;
      }

      .txt {
        padding-left: 10px;
        line-height: 36px;
        flex: 1;
      }

      .delIcon {
        width: 40px;
        text-align: center;
        line-height: 36px;
        color: #f56c6c;
      }

      .abl {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #f56c6c;
      }
    }
  }
}

.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 22px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .price {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;

      // &:last-child{
      //   border-bottom: none;
      // }

      &.addPro {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: none;
      }

      .dragIcon {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 16px;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .price {
        width: 80px;
        text-align: center;
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.input_div {
  i[class^='el-icon'] {
    font-size: 16px;
  }
}
</style>
